<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view class="grace-flex grace-flex-vcenter" style=" width:750rpx;height:100rpx;background:rgba(255,255,255,1);"
			 :style="{ background: back_color}">
				<view class="grace-rows">
					<image :src="tubiao" style="margin-left: 25rpx; width:56rpx;height:56rpx;"></image>
					<view style="line-height: 56rpx;">
						<text style="margin-left: 28rpx; font-size:30rpx;font-weight:400;color:#FFFFFF">{{ card_name }}</text>
					</view>
			
				</view>
			</view>
			<view class="grace-flex grace-flex-vcenter" style="margin-top: 1rpx; width:750rpx;height:50rpx;background:rgba(255,255,255,1);">
			
				<view class="grace-rows">
					<view style="line-height: 56rpx;">
						<text style="margin-left: 108rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1)">CVN码：<text style="color:rgba(16,182,82,1);font-weight: 700;">{{ bc_cvn2 }}</text></text>
					</view>
			
				</view>
			</view>
			<view class="grace-flex grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:50rpx;background:rgba(255,255,255,1);">
			
				<view class="grace-rows">
					<view style="line-height: 56rpx;">
						<text style="margin-left: 108rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1)">有效期：<text style="color:rgba(16,182,82,1);font-weight: 700;">{{ bc_effective }}</text></text>
					</view>
			
				</view>
			</view>
			<!-- 提示 -->
			<view style="margin-top: 2rpx; width:750rpx;height:80rpx;background:rgba(255,255,255,1);">
				<text style="font-size: 30rpx;color: rgba(51,51,51,1);display: block;margin-left: 20rpx;">{{titis}}</text>
				<text style="font-size: 28rpx;color: rgba(51,51,51,1);display: block;margin-left:50rpx;">{{titi}}</text>
			</view>
			
			<!-- 通道列表数据 -->
			<scroll-view class="grace-scroll-y" scroll-y style="height: 780rpx;">
			<view @tap="tap_tongdao(item.kaitong,item.id)" v-for="(item,index) in tongdao_list" :key="index" class="grace-flex-vcenter"
			 style="margin-top: 3rpx; width:750rpx;height:120rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="margin-left: 25rpx;">
					<image src="../../static/yinlian.png" style="width: 100rpx;height: 62rpx;transform: translateY(30rpx);"></image>
					<view v-show="item.is_tuijian==1" style="line-height: 62rpx;margin-left: 39rpx;transform: translateY(30rpx);">
						<!-- <text style="font-size:28rpx;font-weight:bold;color:rgba(51,51,51,1);">{{ item.alias }}</text> -->
						<text style="font-size:28rpx;position: absolute;z-index: 99;color: #FFFFFF;margin-top:3rpx;padding-left: 20rpx;">
							{{ item.alias }}</text>
						<image v-show="item.is_tuijian==1" src="../../static/xinbiao.png" mode="" style="width: 150rpx;height: 50rpx;transform: translateY(10rpx);"></image>
					</view>

					<view v-show="item.is_tuijian==0" style="line-height: 62rpx;margin-left: 39rpx;transform: translateY(30rpx);">
						<text style="font-size:28rpx;font-weight:bold;color:rgba(51,51,51,1);">{{ item.alias }}</text>
					</view>
				</view>
				<view style="margin-left: 600rpx;transform: translateY(-15rpx);">
					<text :style="{color:item.kaitong===1?'rgba(16,182,82,1)':'rgba(220,0,0,1)'}">{{ item.kaitong===1?'已开通':'立即开通' }}</text>
				</view>
			</view>
			</scroll-view>
			<button  @tap="shenchen" class="sc_huik" :style="{background:button_color}">生成还款计划</button>

			<!-- 鉴权 -->
			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">验证码已发送至您</text>
					<text style="font-size: 24rpx;">尾号{{ yuliushouji }}的手机</text>
					<input v-model="yanzhengma" style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx" placeholder="请输入验证码" />
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<!-- 鉴权 -->
			<ourLoading active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				// 鉴权
				show3: false,
				yanzhengma: '', //验证码
				yuliushouji: '', //预留手机
				order_num: '', //订单号
				card_id: '', // 用户银行卡id
				card_name: '', // 银行名称
				card_weihao: '', // 银行卡尾号
				tubiao: '', // 银行卡logo
				tongdao_list: [], // 通道数据列表
				xianshi: 0, // 是否显示生产计划按钮
				loadings: false ,// 页面遮罩层是否显示
				back_color: '', // 银行卡通道头部背景色
				bc_cvn2: '', // 银行卡通道头部cvn码
				bc_effective: '', // 银行卡通道头部有效期
				titis: '', // 通道提示数据
				titi: '', // 通道提示数据
			}
		},
		onLoad: function(opt) {
			if (opt.xianshi) {
				this.xianshi = opt.xianshi;
			}

			this.card_id = opt.id;
			console.log(opt.id)
			this.get_tongdao();
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
			this.get_tongdao();
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					this.titis = '注意事项:'
					this.titi = '为了账单执行更流畅，建议大家把所以的通道都开通！'
					break;
				case 'ios':
					console.log('运行iOS上')
			
					this.titis = '注意事项:'
					this.titi = '为了账单执行更流畅，建议大家把所以的通道都开通！'
			
			
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
		},
		methods: {
			// 点击开通通道按钮事件
			tap_tongdao(kaitong, id) {
				if (kaitong === 0) {
					this.jianquan_id(this.card_id, id, 1);
				} else {
					uni.showToast({
						title: '通道已开通',
						icon: 'none'
					})
				}
			},
			// 获取通道数据列表
			get_tongdao() {
				var vm = this;
				vm.loadings = true
				vm.myPost(
					'api/mypassageway/get_pass_list', {
						card_id: vm.card_id,
						type: '大额代还' + ',' + '小额代还'
					},
					function(res) {
						vm.loadings = false
						console.log(res);
						if (res.code !== 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							vm.loadings = false
						} else {
							var card_info = res.data.card;
							vm.card_name = card_info.bankinfo.name;
							vm.card_weihao = card_info.bc_bank_number.last;
							vm.tubiao = card_info.bankinfo.bank_icon_url;
							vm.tongdao_list = res.data.list;
							vm.bc_cvn2 = res.data.card.cvn
							vm.back_color = card_info.bankinfo.back_color
							vm.bc_effective	= card_info.validity_moth + '/' + card_info.validity_year
							uni.setStorageSync('card', card_info);
						}
					}
				)
			},

			// 通道id鉴权
			jianquan_id(yinhangkaid, tongdaoid, type) {
				if (type === 1) {
					var vm = this;
					vm.loadings = true
					vm.myPost(
						'api/mypassageway/open_the_channel', {
							card_id: yinhangkaid,
							yewu_id: tongdaoid
						},
						function(res) {
							vm.loadings = false
							var is_need_SMS = res.data.verification;
							if (res.code == 210) {
								uni.showModal({
									title: '提示',
									content: '请完善实名认证身份证照片',
									showCancel: true,
									confirmText: '去修改',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/personal_center/modify_real_name'
											});
											uni.setStorageSync('storage_key', 1);
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							} else if (res.code == 200) {
								if (is_need_SMS === 0) {
									vm.get_tongdao();
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})

								} else if (is_need_SMS === 1) {
									vm.yuliushouji = res.data.phone;
									vm.order_num = res.data.bind_num;
									vm.showDialog3()
								} else if (is_need_SMS === 2) {
									uni.navigateTo({
										url: '/pages/web_view/web_view?url=' + res.data.url
									})
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}

						}
					)
				}

			},
			// 显示验证码输入框
			showDialog3: function() {
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 验证码输入框选择了确认
			confirm3: function() {
				if (this.yanzhengma === '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					var vm = this;
					vm.loadings = true
					this.myPost(
						'api/mypassageway/confirm_open_channel', {
							bind_num: this.order_num,
							cms: this.yanzhengma,
						},
						function(res) {
							vm.loadings = false
							vm.closeDialog3();
							vm.get_tongdao();
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}
					)
				}

			},
			// 生成还款计划按钮
			shenchen() {
				if (this.tongdao_list.length !== 0) {
					var dredge = false
					this.each(this.tongdao_list, function(i, v) {
						if (i.kaitong === 1) {
							dredge = true
						}
					})
					if (!dredge) {
						uni.showToast({
							title: '请至少开通一个通道',
							icon: 'none'
						})
					} else {
						uni.navigateTo({
							url:'/pages/Repayment/jihua_start'
						})
					}
				} else {
					uni.showToast({
						title: '此卡暂无可用通道，可暂用云刷',
						icon: 'none'
					})
				}
			},
		},
		components: {
			gracePage,
			graceDialog
		}
	}
</script>

<style>
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.sc_huik {
		width: 400rpx;
		height: 100rpx;
		/* background-color: #3187D5; */
		color: #FFFFFF;
		font-size: 30rpx;
		position: absolute;
		bottom: 50rpx;
		margin-left: 200rpx;
		line-height: 100rpx;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
